<template>
  <div class="reply-header">
    <div class="avatar">
      <van-image :src="formatAvatar(formUser.name)" round />
    </div>
    <div class="form">
      {{ formUser.name }}
    </div>
    <span class="icon"> <van-icon name="play" /> </span>
    <div class="to">
      {{ toUser.name }}
    </div>
    <div class="time">
      {{ formatTime(time) }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { replysRes } from '../../../../service/comment/types'
import { formatAvatar } from '../../../../utils/format-avatar'
import { formatTime } from '../../../../utils/format-time'

defineProps<{
  formUser: replysRes.FromUser
  toUser: replysRes.ToUser
  time: string | Date
}>()
</script>

<style lang="scss" scoped>
.reply-header {
  display: flex;
  align-items: center;
  height: 30px;
  font-size: 14px;
  color: rgb(122, 122, 122);
  .avatar {
    height: 20px;
    width: 20px;
    margin: 0 5px;
  }
  .time {
    display: flex;
    flex: 1;
    justify-content: end;
    margin-right: 15px;
    font-size: 13px;
  }
}
</style>
